<!DOCTYPE html>
<html lang="en" xmlns="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情 · Top - 英皇乐理 在线模考平台</title>
    <link rel="shortcut icon" th:href="@{/images/logo.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/all.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/car.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/commons.js}"></script>
    <script type="text/javascript" th:src="@{/js/api.js}"></script>
    <script type="text/javascript" th:src="@{/js/car.js}"></script>
</head>
<body>

<div class="main-div">
    <div class="main-box">
        <div th:replace="~{commons::headerbar(active='productList')}"></div>
        <div class="content position" style="display: flex; justify-content: space-between">
            <div>
            </div>
        </div>
        <div class="cars">
            <div class="available-area">
                <div class="cart-steps">
                    <span class="active">1.我的购物车</span>
                    <span class="">2.填写订单信息</span>
                    <span class="">3.成功提交订单</span>
                </div>
            </div>
            <div class="car-goods">
                <div class="cart-goods-title">
                    <div class="goods-title">商品</div>
                    <div class="width_10">单价（元）</div>
                    <div class="width_10">小计</div>
                    <div class="width_30">操作</div>
                </div>
                <!--如果没有记录-->
                <div style="text-align: center" th:if="${productEntities.size() == 0}">
                    <img th:src="@{/images/is-empty.png}" />
                    <div style="padding: 40px; color: #ccc">暂无记录</div>
                </div>
                <div class="cart-goods-items" th:each="productEntity : ${productEntities}">
                    <div class="goods-item">
                        <div class="goods-title">
                            <img th:src="${productEntity.fileEntities[0].filePath}" th:data-id="${productEntity.id}" th:onclick="|querySingle(this.getAttribute('data-id'))|">
                            <div><p>[[${productEntity.productName}]]</p></div>
                        </div>
                        <div class="width_10">￥[[${productEntity.actualPrice}]]</div>
                        <div class="width_10"> ￥[[${productEntity.actualPrice}]]</div>
                        <div class="width_30">
                            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" th:data-id="${productEntity.id}" th:data-carId="${productEntity.carId}" th:onclick="|submit(this.getAttribute('data-id'), this.getAttribute('data-carId'))|">结算</button>
                            <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" th:data-id="${productEntity.carId}" th:onclick="|del(this.getAttribute('data-id'))|">删除</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="~{commons::footerbar}"></div>
</div>
</body>
</html>